<template>
  <div class="invoiceManagement">
    <section class="header">
      <span>发票管理</span>
    </section>
    <div class="search-box" @keyup.enter="searchFun" v-if="!isCompany">
      <i class="iconfont iconsearch1"></i>
      <el-input
        placeholder="输入企业名称进行搜索"
        class="search"
        v-model.trim="companyName"
        clearable
      ></el-input>
    </div>
    <div class="search-box search-box-last">
      <section class="option">
        <span>实缴月份:</span>
        <el-date-picker
          v-model="payMonth"
          type="month"
          value-format="yyyyMM"
          placeholder="选择月"
          @change="searchFun"
        >
        </el-date-picker>
      </section>
    </div>

    <div class="table">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55"></el-table-column> -->
        <el-table-column prop="invoiceId" label="发票ID"></el-table-column>
        <el-table-column prop="orderId" label="订单ID"></el-table-column>
        <el-table-column prop="companyName" label="企业名称"></el-table-column>
        <el-table-column prop="personName" label="员工姓名"></el-table-column>
        <el-table-column prop="payMonth" label="实缴月份"></el-table-column>
        <el-table-column
          prop="invoiceStatus"
          label="状态"
          :formatter="invoiceStatusFormatter"
        ></el-table-column>

        <el-table-column label="操作" v-if="isShow">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              :disabled="scope.row.invoiceStatus==2"
              @click="onAgree(scope.row.invoiceId)"
              >开具发票</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6, 12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- <div class="table" v-show="isInvoice == 1">
      <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="orderNo" label="订单号"></el-table-column>
        <el-table-column
          prop="orderTypeId"
          label="订单类型"
          :formatter="orderTypeFormatter"
        ></el-table-column>
        <el-table-column prop="accountId" label="账户ID"></el-table-column>
        <el-table-column
          prop="balance"
          label="余额"
          :formatter="moneyFilter"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="金额"
          :formatter="moneyFilter"
        ></el-table-column>
        <el-table-column
          prop="balanceBeforeOperation"
          label="操作前金额"
          :formatter="moneyFilter"
        ></el-table-column>
      </el-table>
      <el-pagination
        
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="current"
        :page-sizes="[6, 12, 24, 36]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div> -->
    <!--发票信息-->
    <el-dialog
      title="变更发票信息"
      :visible.sync="infoDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="info">
        <el-form-item label="发票类型(必填)" :label-width="formLabelWidth">
          <el-select
            v-model="info.type"
            @change="typeChange"
            placeholder="请选择发票类型"
          >
            <el-option label="普通电子发票" :value="1"></el-option>
            <el-option label="不需要发票" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="开票抬头(必填)"
          v-show="isNeed == '1'"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.head"
            placeholder="在这里输入开票抬头"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="纳税人识别号(必填)"
          v-show="isNeed == '1'"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.id"
            placeholder="在这里纳税人识别号"
            clearable
          ></el-input>
        </el-form-item>
        <p class="tip" @click="open" v-show="isNeed == '1'">{{ text }}</p>
        <h4 v-show="isOpen">
          下列信息只有贵司对发票格式有具体要求时才需要填写填写保存后将体现在开具的发票上
        </h4>
        <el-form-item
          label="收票邮箱"
          v-show="isOpen"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.email"
            placeholder="在这里输入收票邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="通知手机"
          v-show="isOpen"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.phone"
            placeholder="在这里输入通知手机"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="特殊开票需求"
          v-show="isOpen"
          :label-width="formLabelWidth"
        >
          <el-select v-model="info.specialType" placeholder="请选择发票类型">
            <el-option label="正常开票" :value="1"></el-option>
            <el-option label="只开服务费金额" :value="2"></el-option>
            <el-option label="不开服务费金额" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="公司注册地址及电话"
          v-show="isOpen"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.phone"
            placeholder="公司注册地址及电话"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="开户行及账号"
          v-show="isOpen"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="info.phone"
            placeholder="开户行及账号"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="infoDialog = false">取 消</el-button>
        <el-button type="primary" @click="infoDialog = false">确 定</el-button>
      </div>
    </el-dialog>

    <!--发票信息-->
    <el-dialog title="发票信息" :visible.sync="billDialog" center>
      <el-form :model="bill">
        <el-form-item label="发票类型" :label-width="formLabelWidth">
          <span>{{ bill.type }}</span>
        </el-form-item>
        <el-form-item label="发票抬头" :label-width="formLabelWidth">
          <span>{{ bill.head }}</span>
        </el-form-item>
        <el-form-item label="纳税人识别号" :label-width="formLabelWidth">
          <span>{{ bill.id }}</span>
        </el-form-item>
        <el-form-item label="收票邮箱" :label-width="formLabelWidth">
          <span>{{ bill.email }}</span>
        </el-form-item>
        <el-form-item label="开票需求" :label-width="formLabelWidth">
          <span>{{ bill.need }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="billDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "invoiceManagement",
  data() {
    return {
      isShow: false,
      isCompany: false,
      companyName: "",
      payMonth: "",
      loading: false,
      isBtn: false,
      pageSize: 6,
      text: "+ 填写特殊需求",
      isOpen: false,
      isNeed: "1",
      infoDialog: false,
      billDialog: false,
      isNumber: 0,
      isInvoice: 0,
      searchContent: "",
      isHide: true,
      current: 1,
      total: null,
      formLabelWidth: "160px",
      info: {
        type: "1",
        specialType: "",
        id: "",
        head: "",
      },
      menu: [{ title: "未开票订单" }, { title: "已开票订单" }],
      billAmount: "",
      dialogTableVisible: false,
      tableData: [],
      bill: {},
    };
  },
  methods: {
    switchFun(i) {
      this.isInvoice = i;
      this.current = 1;
      this.pageSize = 6;
    },
    typeChange(e) {
      this.isNeed = e;
      if (e == "0") {
        this.isOpen = false;
        this.text = "+ 填写特殊需求";
      }
    },
    open() {
      if (this.isOpen) {
        this.text = "+ 填写特殊需求";
        this.isOpen = false;
      } else {
        this.text = "- 清空并收起下列选填信息";
        this.isOpen = true;
      }
    },
    handleSizeChange(e) {
      this.pageSize = e;
      this.getData();
    },
    handleCurrentChange(e) {
      this.current = e;
      this.getData();
    },
    handleSelectionChange(e) {
      if (e.length > 0) {
        this.isBtn = true;
        this.idList = [];
        for (let i = 0; i < e.length; i++) {
          this.idList.push(e[i].orderNo);
        }
      } else {
        this.isBtn = false;
      }
    },
    //同意开票
    onAgree(invoiceId) {
      this.$confirm("确定同意开票?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.agreeRequest(invoiceId);
        })
        .catch(() => {});
    },
    agreeRequest(invoiceId) {
      var reqData = {
        invoiceId,
        invoiceStatus: "2", //0已申请；1未开票；2已开票
      };
      let reqReport = reqRep({ traCode: "_INVOICE_STATUS", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.$message({
            message: "开票成功",
            type: "success",
          });
          this.current = 1;
          this.getData();
        }
      });
    },

    //获取订单类型
    getOrderType() {
      var reqData = {
        orderType: "",
        current: 1,
        pageSize: 999,
      };
      let reqReport = reqRep({ traCode: "_LIST_ORDER_TYPE", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.orderTypeOptions = resReport.data.records;
          this.orderTypeOptions.unshift({
            orderType: "全部",
            orderTypeId: "0",
          });
        }
      });
    },
    searchFun() {
      this.current = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      var reqData = {
        companyName: this.companyName,
        payMonth: this.payMonth,
        current: this.current,
        size: this.pageSize,
      };
      let reqReport = reqRep({ traCode: "_PROCESS_AUDIT_LIST", data: reqData });
      requestApiPost(reqReport).then((data) => {
        let resReport = resRep(data);
        this.loading = false;
        if (resReport.getReCode() != "0000") {
          this.$message({
            message: resReport.getReMsg(),
            type: "error",
          });
        } else {
          this.tableData = resReport.data.records;
          this.total = resReport.data.total;
        }
      });
    },
    orderTypeFormatter(a, b, c) {
      for (let index = 0; index < this.orderTypeOptions.length; index++) {
        if (c == this.orderTypeOptions[index].orderTypeId) {
          return this.orderTypeOptions[index].orderType;
        }
      }
    },
    moneyFilter(a, b, c) {
      if (c) {
        return c;
      } else {
        return 0;
      }
    },
    orderStatusFormatter(a, b, c) {
      if (c == 0) {
        return "生成订单";
      } else if (c == 1) {
        return "订单处理中";
      } else {
        return "订单完成";
      }
    },

    /**0已申请；1未开票；2已开票 */
    invoiceStatusFormatter(a, b, c) {
      if (c === "1") {
        return "未开票";
      } else if (c === "2") {
        return "已开票";
      } else if (c === "0") {
        return "已申请";
      }
    },
  },
  created() {
    if (sessionStorage.getItem("KEY") == "company") {
      this.isCompany = true;
    } else {
      this.isCompany = false;
    }
    if (
      sessionStorage.getItem("KEY") == "A" ||
      sessionStorage.getItem("KEY") == "F"
    ) {
      this.isShow = true;
    } else {
      this.isShow = false;
    }
    // this.getOrderType();
    this.getData();
  },
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header .org {
  float: right;
  cursor: pointer;
}
.org:hover {
  color: #13cb6e;
}
.header i {
  margin-right: 5px;
}
.opt-user {
  padding: 20px 15px;
}
.opt-user > section {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
.opt-user i {
  font-size: 20px;
  margin-right: 5px;
  vertical-align: middle;
}
.opt-user .iconadd1 {
  color: #13cb6e;
}
.opt-user .iconbiaoge-xiazai {
  color: #33ac37;
}
.add-user:hover {
  color: #13cb6e;
}
.input-user:hover {
  color: #33ac37;
}
.menu-swtich {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
}
.menu-swtich li {
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
}
.active {
  color: #13cb6e;
  border-bottom: 2px solid #13cb6e;
}
.search-box {
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.search-box i {
  font-size: 18px;
  margin-left: 15px;
  color: #999;
  vertical-align: middle;
}
.search-box .search {
  display: inline-block;
  width: 80%;
}
.showMoney {
  padding: 30px 15px;
}
.showMoney .sm-h {
  margin-bottom: 20px;
}
.sm-h section {
  display: inline-block;
  margin-right: 20px;
}
.sm-h .month {
  margin-left: 10px;
  color: #999;
}
i {
  color: #999;
  font-size: 16px;
}
.download {
  float: right;
  font-size: 14px;
  margin-right: 0 !important;
  cursor: pointer;
}
.download:hover,
.download:hover i {
  color: #13cb6e !important;
}

/* .el-button--success {
  width: 100px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  margin-top: 5px;
  background-color: #13cb6e;
}
.el-button--success.is-disabled {
  background-color: #999;
  border-color: #999;
} */
.active .table {
  margin-top: 4px;
}
.table .table-name {
  width: 100%;
  padding: 10px;
  background-color: #eee;
}
.table .table-value {
  width: 100%;
  padding: 10px;
  cursor: pointer;
}
.table .table-value:hover {
  background-color: #eee;
}
.table .table-name li,
.table .table-value li {
  position: relative;
  float: left;
  width: 20%;
  box-sizing: border-box;
}
.table .table-value h6 {
  color: #666;
  font-size: 14px;
}
.table .table-value p {
  color: #999;
  font-size: 12px;
}
.table .table-value .iconfont {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -8px;
  font-size: 16px;
}
.table .content {
  display: inline-block;
  border-right: 1px solid #ccc;
}
.table .content:last-child {
  border: none;
}
.table .content > section {
  padding: 10px 15px;
}
.table .content > section span {
  margin-right: 10px;
  display: inline-block;
  width: 80px;
  color: #999;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.table .content > section span:nth-child(2) {
  text-align: center;
}
.table .content > section span:last-child {
  margin-right: 0;
  text-align: center;
}
.rests {
  float: right;
}
.hideOrder {
  padding: 10px 0;
  border-top: 1px solid #eee;
}
.hideOrder .el-switch,
.hideOrder ul {
  float: right;
}
.hideOrder li {
  text-align: right;
  padding-right: 20px;
}
.hideOrder li:last-of-type {
  color: #999;
}
.hideOrder .el-switch {
  padding-top: 20px;
}
.el-form-item,
h4 {
  width: 390px;
  margin: 0 auto 22px;
}
.tip {
  width: 228px;
  text-align: center;
  background: #ccc;
  padding: 5px 10px;
  margin: 0 auto 22px;
  cursor: pointer;
}
.el-input,
.el-select {
  width: 228px;
}
.billAmount-box {
  font-size: 14px;
  color: #999;
}
.billAmount {
  font-weight: 600;
  font-size: 16px;
  color: #333;
}
.img-head {
  position: relative;
  top: 10px;
  text-align: center;
  left: 50%;
  margin-left: -54px;
  width: 108px;
  height: 135px;
  cursor: pointer;
  background-color: #eee;
}
.img-head i,
.img-bj i {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #999;
  font-size: 20px;
  margin-top: -10px;
  margin-left: -10px;
}
.img-head input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
}
</style>
